import React,{Component}from 'react';
import E from 'wangeditor';
import http from '../api/http'
import { Button, message } from 'antd';
class Editor extends Component{
    constructor(props) {
        super(props);
        this.state = {
            editorContent:'<div>12345</div>',
        };
    }
    componentDidMount() {
        // const editorinfo = this.props.editorinfo;
        const elemMenu = this.refs.editorElemMenu;
        const elemBody = this.refs.editorElemBody;
        const editor = new E(elemMenu,elemBody)
        //拿到页面首次图片
        this.firstimg();   
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
            this.setState({
                editorContent: this.state.editorContent,
            })
            this.selectdiffent()
        }
        // 自定义文件上传
        editor.customConfig.customUploadImg =  (files, insert)=>{
            // files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法
            let file;
            if (files && files.length) {
                file = files[0];
            } else {
                return
            }
            console.log(files,file)
            this.setState({imgCYC:files})
            // 图片上传
            const formData = new FormData();
            formData.append('file', files);
            // formData.append('Banners',{id:1,naviChildId:editorinfo.naviChildId})
            http.post('org-list.do',formData).then(res =>{
               
            })
        }
        //菜单渲染
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格
            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.create()
    };
    firstimg = ()=>{
        const diffent = []
        var imgList = document.getElementsByTagName('img');
        for(var i =0;i<imgList.length;i++){
            diffent.push(imgList[i].namespaceURI)
        }
        this.setState({
            imgList:diffent
        })
    }
    // 查不同
    selectdiffent = ()=>{
        //获取页面最新图片
        const newimg = []
        var imgList = document.getElementsByTagName('img');
        for(var i =0;i<imgList.length;i++){
            newimg.push(imgList[i].src)
        }
        // 跟页面上的老图片对比
        var oldimg =  this.state.imgList
        var result =[];
        if(newimg.length < oldimg.length){
            var c=newimg.toString();
            for(var j=0;j<oldimg.length;j++){
                if(c.indexOf(oldimg[j].toString())===-1){
                    result.push(oldimg[j]);
                }      
            }
            http.delete('banners/deletePhoto?fileName='+ result[0],'ADMINUSER').then(res =>{
                if(res.code === 0){
                     message.success('图片已删除')
                }
            })
        }
        this.setState({
            imgList:newimg
        })
    }
    delectImg=()=>{
        let img = this.state.imgCYC
        console.log(img.splice(1))
    }
    editorupdata = () =>{
        const formData = new FormData();
        formData.append('id', this.props.editorinfo.id);
        //formData.append('titleRemark', this.state.editorContent);
        formData.append('title', this.props.editorinfo.title);
        formData.append('titlePresentation',this.props.editorinfo.titlePresentation);
        formData.append('titleQuote',this.props.editorinfo.titleQuote);
        http.put('banners/updateBanners',formData,'ADMINUSER').then(res =>{
            if(res.code === 200){
                message.success('修改成功')
            }
        })
        this.props.Getprops(1)
    }
    render(){
        return(
            <div className="shop">
                <div className="text-area" >
                    <div ref="editorElemMenu" style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}} className="editorElem-menu"></div>
                    <div ref="editorElemBody" style={{padding:"0 10px",height:500,border:"1px solid #ccc",borderTop:"none"}} className="editorElem-body" >
                        <p></p>
                    </div>
                </div>
                <Button onClick={this.editorupdata.bind(this)}>提交添加</Button>
                <Button onClick={this.delectImg}>删除图片</Button>
            </div>
        )
    }
}
export default Editor